<template>
  <el-form ref="editForm" :model="editFormData" :rules="editFormRule" label-width="0px" class="basicInfo">
    <div class="single-box" style="margin-top: 0">
      <h3>{{ editFormTitle }}</h3>
    </div>
    <el-descriptions :column="2" size="small" :labelStyle="{ width: '160px' }" :border="true">
      <!-- 额外元素插槽 -->
      <slot name="added"></slot>
      <el-descriptions-item v-for="(editItem, editIndex) in editFormMap" :key="editIndex" :label-class-name="editItem.labelCustomClass">
        <template slot="label">
          <span>
            {{ editItem.label }}
            <el-popover v-if="editItem.tooltipText" placement="top" trigger="hover">
              <span>{{ editItem.tooltipText }}</span>
              <i class="el-icon-question cursorLink" slot="reference"></i>
            </el-popover>
          </span>
        </template>
        <el-form-item :prop="editItem.prop" :label-width="editItem.width + 'px' || '130px'" :class="editItem.customClass || ''">
          <template v-if="editItem.type === 'select'">
            <el-select
              v-model="editFormData[editItem.prop]"
              :disabled="editItem.disabled"
              :readonly="editItem.readonly"
              :size="editItem.size || 'medium'"
              :placeholder="'请选择' + editItem.label"
              @change="changeAction($event, editItem)"
            >
              <el-option
                v-for="(optionItem, optionIndex) in optionListMap[editItem.linkOptionProp || editItem.prop]"
                :key="optionIndex"
                :label="optionItem[editItem.optionLabel || editItem.optionLabelText || 'label']"
                :value="optionItem[editItem.optionValue || 'value']"
              ></el-option>
            </el-select>
          </template>
          <template v-else-if="editItem.type === 'cascader'">
            <el-cascader
              v-model="editFormData[editItem.prop]"
              :ref="editItem.prop + 'Cascader'"
              :options="optionListMap[editItem.linkOptionProp || editItem.prop]"
              :size="editItem.size || 'medium'"
              :props="{
                value: editItem.optionValue,
                label: editItem.optionLabel,
                children: editItem.optionChildName,
              }"
              :placeholder="'请选择' + editItem.label"
              @change="changeAction($event, editItem)"
            ></el-cascader>
          </template>
          <template v-else-if="editItem.type === 'radio'">
            <el-radio-group v-model="editFormData[editItem.prop]" :disabled="editItem.disabled">
              <el-radio
                v-for="(optionItem, optionIndex) in optionListMap[editItem.linkOptionProp || editItem.prop]"
                :key="optionIndex"
                :label="optionItem[editItem.optionValue || 'value']"
              >
                {{ optionItem[editItem.optionLabel || editItem.optionLabelText || 'label'] }}
              </el-radio>
            </el-radio-group>
          </template>
          <template v-else-if="editItem.type === 'switch'">
            <el-switch
              v-model="editFormData[editItem.prop]"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="editItem.activeValue"
              :inactive-value="editItem.inactiveValue"
              :disabled="editItem.disabled"
              :readonly="editItem.readonly"
              :size="editItem.size || 'medium'"
            ></el-switch>
          </template>
          <template v-else-if="editItem.type === 'textarea'">
            <el-input
              v-model="editFormData[editItem.prop]"
              type="textarea"
              :rows="editItem.row"
              :disabled="editItem.disabled"
              :readonly="editItem.readonly"
              :placeholder="editItem.placeholder || ''"
            ></el-input>
          </template>
          <template v-else-if="editItem.type === 'datePicker'">
            <el-date-picker
              v-model="editFormData[editItem.prop]"
              :type="editItem.dateType"
              :format="editItem.format"
              :value-format="editItem.valueFormat"
              :clearable="editItem.clearable"
              :picker-options="editItem.pickerOptions"
              :placeholder="'请选择' + editItem.label"
              :size="editItem.size || 'medium'"
            ></el-date-picker>
          </template>
          <template v-else-if="editItem.type === 'form-text'">
            <div style="padding: 0 15px">{{ editFormData[editItem.prop] || ' ' }}</div>
          </template>
          <template v-else-if="editItem.type === 'text'">
            <div>{{ editFormData[editItem.prop] }}</div>
          </template>
          <template v-else>
            <el-input
              v-model="editFormData[editItem.prop]"
              :disabled="editItem.disabled"
              :readonly="editItem.readonly"
              :placeholder="'请输入' + editItem.label"
              :size="editItem.size || 'medium'"
              @input="inputAction(editItem.prop)"
            ></el-input>
          </template>
        </el-form-item>
      </el-descriptions-item>
    </el-descriptions>
  </el-form>
</template>
<script>
import setEditForm from '@/static/mixin/setEditForm';
import { handleAddrCascader } from '../utils';
export default {
  name: 'BasicInfo',
  mixins: [setEditForm],
  props: {
    editFormTitle: {
      type: String,
      default: '基本信息',
    },
  },
  watch: {
    optionListMap: {
      handler(data) {
        // 组装地区组件数据
        if (data.addr && data.addr.length) {
          const { locationProvinceId, locationCityId, locationAreaId } = handleAddrCascader(data.addr, this.editFormData);
          this.$set(this.editFormData, 'addr', [locationProvinceId, locationCityId, locationAreaId]);
          this.$set(this.editFormData, 'locationProvinceId', locationProvinceId);
          this.$set(this.editFormData, 'locationCityId', locationCityId);
          this.$set(this.editFormData, 'locationAreaId', locationAreaId);
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.basicInfo {
  border: 1px solid #f4f4f4;
  & ::v-deep .userTypeItem,
  & ::v-deep .genderItem {
    .el-form-item__content {
      padding: 0 15px;
      border: 1px solid transparent;
    }
  }
  .requiredFormItem {
    & > span {
      position: relative;
    }
    & > span:before {
      position: absolute;
      left: -7px;
      top: 50%;
      transform: translateY(-50%);
      content: '*';
      color: #f56c6c;
      margin-right: 4px;
    }
  }
  & ::v-deep .userTypeItem.is-error,
  & ::v-deep .genderItem.is-error {
    .el-form-item__content {
      border-color: #ff4949;
    }
  }

  & ::v-deep .el-descriptions .el-descriptions-item__content .el-form-item {
    margin-bottom: 10px !important;
  }
  & ::v-deep .el-descriptions {
    padding: 15px;
  }
  & ::v-deep .el-form-item,
  & ::v-deep .el-date-editor,
  & ::v-deep .el-select,
  & ::v-deep .el-cascader {
    width: 100%;
  }
  // input提示框保留换行符\n
  & ::v-deep .el-input::placeholder {
    white-space: pre-wrap;
  }
  .formText {
    border-bottom: 1px solid #dcdfe6;
  }
  .cursorLink:hover {
    cursor: pointer;
  }
  .single-box {
    h3 {
      color: #333333;
      background-color: #f5f5f5;
      border-color: #ddd;
      font-size: 14px;
      padding: 10px 15px;
      margin: 0;
    }
  }
}
</style>
